var React  = require('react');
var DescTextarea = require('./descTextarea');
var CompletionQuestion = React.createClass({
	_getSpace(){
		var title = this.props.question.title;
		return title.match(/\(__\d__\)/g);
	},
	getInitialState:function(){
		return {
			answer:[]
		};
	},
	componentDidMount:function(){

	},
	componentDidUpdate:function(){

	},
	
	getDefaultProps:function(){
		return {
			curValue:{answer:[],desc:''}
		}
	},
	_handleChange:function(e){
		this.state[parseInt(e.target.index)] = e.target.value;
	},
	render:function(){
		console.log('CompletionQuestion render ............');
		var self = this;
		var res = _.map(this._getSpace(),function(s,ind){
			return <div className="input-group" key={'comp_'+ind}>
					  <span className="input-group-addon" id="basic-addon1">{s}:</span>
					  <input type="text" className="form-control" index={ind}  onChange={self._handleChange} />
					</div>;
		});
		return (
			<div className='panel panel-info'>
				<div className='panel-heading'>
					{this.props.question.title}
				</div>
				<div className='panel-body'>
					{res}
				</div>
				<DescTextarea _answer={this.props._answer} curValue={this.props.curValue.desc}/>
			</div>
		);
	}
});

module.exports = CompletionQuestion;